// SCSS 混合宏定义

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 文本省略
@mixin ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
  }
}

// 绝对居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Flex 布局快捷方式
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

// 响应式断点
@mixin mobile {
  @media (max-width: #{$breakpoint-sm - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$breakpoint-sm}) and (max-width: #{$breakpoint-md - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$breakpoint-md}) {
    @content;
  }
}

@mixin large-desktop {
  @media (min-width: #{$breakpoint-lg}) {
    @content;
  }
}

// 按钮样式混合
@mixin button-variant($color) {
  background-color: $color;
  border-color: $color;
  color: #fff;

  &:hover,
  &:focus {
    background-color: darken($color, 10%);
    border-color: darken($color, 10%);
  }

  &:active {
    background-color: darken($color, 15%);
    border-color: darken($color, 15%);
  }

  &:disabled {
    background-color: lighten($color, 20%);
    border-color: lighten($color, 20%);
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// 卡片阴影效果
@mixin card-shadow($level: 1) {
  @if $level == 1 {
    box-shadow: $box-shadow-sm;
  } @else if $level == 2 {
    box-shadow: $box-shadow-md;
  } @else if $level == 3 {
    box-shadow: $box-shadow-lg;
  }
}

// 过渡动画
@mixin transition($properties: all, $duration: $transition-normal, $timing: ease) {
  transition: $properties $duration $timing;
}

// 渐变背景
@mixin gradient-bg($start-color, $end-color, $direction: to right) {
  background: linear-gradient($direction, $start-color, $end-color);
}

// 毛玻璃效果
@mixin glass-effect($opacity: 0.1) {
  background: rgba(255, 255, 255, $opacity);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

// 滚动条样式
@mixin scrollbar($width: 8px, $track-color: transparent, $thumb-color: var(--el-fill-color)) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  &::-webkit-scrollbar-track {
    background: $track-color;
    border-radius: $width / 2;
  }

  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $width / 2;

    &:hover {
      background: darken($thumb-color, 10%);
    }
  }
}

// 动画关键帧
@mixin keyframes($name) {
  @keyframes #{$name} {
    @content;
  }
}

// 状态颜色生成器
@mixin status-color($status) {
  $color: map-get($status-colors, $status);
  @if $color {
    color: $color;
    
    &.with-bg {
      background-color: lighten($color, 40%);
      border-color: $color;
    }
    
    &.with-border {
      border-color: $color;
    }
  }
}

// 输入框样式
@mixin input-variant($border-color: var(--el-border-color)) {
  border: 1px solid $border-color;
  border-radius: $border-radius-md;
  padding: $spacing-sm $spacing-md;
  font-size: $font-size-md;
  transition: border-color $transition-fast;

  &:focus {
    border-color: $primary-color;
    outline: none;
    box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
  }

  &:disabled {
    background-color: var(--el-disabled-bg-color);
    color: var(--el-disabled-text-color);
    cursor: not-allowed;
  }
}

// 加载动画
@mixin loading-spinner($size: 20px, $color: $primary-color) {
  width: $size;
  height: $size;
  border: 2px solid rgba($color, 0.3);
  border-top: 2px solid $color;
  border-radius: 50%;
  animation: spin 1s linear infinite;

  @include keyframes(spin) {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}

// 隐藏文本但保持可访问性
@mixin visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

// 强调文本
@mixin highlight-text($color: $primary-color) {
  color: $color;
  font-weight: 600;
  
  &::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: $color;
    margin-right: $spacing-sm;
    vertical-align: text-bottom;
  }
}

// 标签样式
@mixin tag-variant($color, $background-opacity: 0.1) {
  background-color: rgba($color, $background-opacity);
  color: $color;
  border: 1px solid rgba($color, 0.3);
  border-radius: $border-radius-sm;
  padding: 2px $spacing-sm;
  font-size: $font-size-xs;
  font-weight: 500;
}